<template>
  <div>
    <div id="aCoursesList">
      <!-- 网校课程 开始 -->
       <el-form :inline="true" class="demo-form-inline">  
            <div class="box">
              <div class="searchBox">
                <input type="text" v-model="keyword" placeholder="请输入关键词进行搜索" class="searchInput" style="padding-left: 10px;">
                <input type="button"  @click="getSearchResult()" value="搜索" class="searchButton">
              </div>
            </div>
        </el-form>
        <!-- /无数据提示 开始-->
          <section class="no-data-wrap" v-if="data.total==0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
          </section>
        <section class="container">
          <div>
            <article class="comm-course-list">
              <!--文章列表-->
            <main class="site-main">
                
                <template v-for="item in postList">
                    <post :post="item" :key="item.id"></post>
                </template>
            </main>
              <div class="clear"></div>
            </article>
          </div>
          <!-- 公共分页 开始 -->
        <div>
          <div class="paging" v-if="data.total > 0">
        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
        <a
          :class="{undisable: !data.hasPrevious}"
          href="#"
          title="首页"
          @click.prevent="gotoPage(1)">首</a>
        <a
          :class="{undisable: !data.hasPrevious}"
          href="#"
          title="前一页"
          @click.prevent="gotoPage(data.current-1)">&lt;</a>
        <a
          v-for="page in data.pages"
          :key="page"
          :class="{current: data.current == page, undisable: data.current == page}"
          :title="'第'+page+'页'"
          href="#"
          @click.prevent="gotoPage(page)">{{ page }}</a>
        <a
          :class="{undisable: !data.hasNext}"
          href="#"
          title="后一页"
          @click.prevent="gotoPage(data.current+1)">&gt;</a>
        <a
          :class="{undisable: !data.hasNext}"
          href="#"
          title="末页"
          @click.prevent="gotoPage(data.pages)">末</a>
            <div class="clear"/>
          </div>
        </div>
        <!-- 公共分页 结束 -->
        </section>
      </div>
      <!-- /网校课程 结束 -->
    </div>
</template>

<script>
import question from '@/api/question'
import Post from '@/components/post'

export default {
  data () {
    return {
      page: 1,
      questionList:[],
      keyword: '',
      postList: [],
      data: {},
    }
  },
  components: {
            Post,
        },
  created() {
    // this.getSearchResult()
  },
  methods: {
    // 查询热门问答
    getSearchResult() {
        this.gotoPage(1)
    },
    // 分页切换
    gotoPage(page) {
      question.getSearchResult(page, 4, this.keyword)
        .then(response => {
          this.data = response.data.data
          this.postList = response.data.data.items
        })
    },
  }
}
</script>
<style>
.box{
    margin: 0 auto;
    padding-top: 80px;
    height: 50px;
    width: 100%;
  }
  .searchBox{
    margin: 0 auto;
    width: 60%;
    position: relative;
  }
  .searchInput{
    display: inline-block;
    width: 85%;
    height: 38px;
    border: 1px solid #cccccc;
    float: left;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .searchButton{
    display: inline-block;
    width: 15%;
    height: 38px;
    line-height: 40px;
    float: left;
    background-color: #00a0e9;
    font-size: 16px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: none;
    color: #fff;
  }
</style>